<template>
    <div class="box">
        <el-container>
            <el-header>
                <el-row :gutter="20" class="inputBox">
                    <el-col :span="10">
                        <el-select v-model="value" class="m-2" size="large">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="10">
                        <el-input v-model="input" placeholder="请输入查询信息" />
                    </el-col>
                    <el-col :span="4">
                        <div class="submite" @click="submite()">搜索</div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-row :gutter="20" class="videoBox">
                    <el-col :span="8" v-for="info,index in infos" class="videoWrap">
                        <personnelItem
                        :name="info.name"
                        :classRoom="info.classRoom"
                        :teach="info.teach"
                        :patriarch="info.patriarch"
                        :positon="info.positon"
                        :time="info.time"
                        :sex="info.sex"
                        ></personnelItem>
                    </el-col>
                </el-row>
                <div >
                    <el-pagination 
                        small
                        background
                        layout="prev, pager, next"
                        :total="50"
                        class="pagination"
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import {ref} from "vue";

import personnelItem from "./personnelItem.vue";


const options = [
{
    value: '教师',
    label: '教师',
    disabled: true,
  }, 
  {
    value: '学生',
    label: '学生',
  },
  {
    value: '安保人员',
    label: '安保人员',
  },
  {
    value: '外勤人员',
    label: '外勤人员',
  }
]

let value = ref('学生');
let input  =ref();


let infos = ref([
    {
        sex:1, //1 男  0 女
        name:"欧阳明雪",
        classRoom:"6年级2班",
        teach:"张三",
        patriarch:"李四",
        positon:"教学楼2号门禁机",
        time:"2023-08-12 12:12:12",

    }
])

createrInfo();
function createrInfo()
{
    for (let index = 0; index < 8; index++) {
        infos.value.push( {
            sex:Math.random() > 0.5 ? 1 : 0, //1 男  0 女
            name:"欧阳明雪",
            classRoom:"6年级2班",
            teach:"张三",
            patriarch:"李四",
            positon:"教学楼2号门禁机",
            time:"2023-08-12 12:12:12",

        })
    }
}





defineProps({
    title:String
})



function submite(){
    console.log('搜索');
}

</script>

<style lang="less" scoped>
    .box{
        // width: 340px;
        line-height: 40px;
        .inputBox{
            height: 40px;
            line-height: 40px;
            .el-input__inner{
                height: 40px;
                line-height: 40px;
                border: 1px solid #03d2ec;
                background: #1d243283;
            }

            .submite{
                height: 42px;
                line-height: 42px;
                letter-spacing: 10px;
                padding: 0px 5px;
                text-align: center;
                color: #03d2ec;
                background-color: #224358ad;
                border: 1px solid #03d2ec;
                box-sizing: content-box;
                font-size: 16px;
            }
        }
        .videoBox{
            .videoWrap{
                position: relative;
                background: url("/images/videoBox.png") no-repeat;
                background-size: 98% 98%;
                background-position: center center;
                margin: 5px 0px;
            }
            video{
                width: 100%;
                height: auto;
                margin: auto;
                margin-top: 15px;
            }
            p{
                color: white;
                background-color: rgba(0, 0, 0, 0.7);
                text-align: center;
                position: absolute;
                width: 93%;
                margin-left: 0%;
                bottom: 16px;
                height: 30px;
                line-height: 30px;
                overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
                text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
                white-space: nowrap; 
                font-size: 12px;
            }
        }
        .pagination{
          float: right;
          margin-top: 20px;
        }
       
    }


</style>